<template>
  <div class="header">
    <img src="../assets/LOGO.png" class="logo" />
    <h2>菜谱小程序后台管理系统</h2>
    <el-dropdown class="dropdown" @command="handleCommand">
      <span class="el-dropdown-link">
        <el-avatar style="vertical-align:middle;margin-top:-5px;" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
         欢迎你，{{username}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="updatePass" icon="el-icon-unlock">修改密码</el-dropdown-item>
        <el-dropdown-item command="logout" icon="el-icon-switch-button">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>

export default {
  computed:{
    username(){
      return this.$store.getters['admin/getRealName']
    }
  },
  methods:{
    handleCommand(command){
      if(command=='logout'){
        this.$confirm('确定要退出登录吗？, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          //这里调用vuex里面的logout
          this.$store.dispatch('admin/logout');
        }).catch(()=>{})
      }
    }
  }
}
</script>

<style scoped>
.header{
  display: flex;
  align-items:center;
}
.logo{
  width: 80px;
  height:80px;
}
h2{
  flex:8;
  font-size:30px;
}
.dropdown{
  flex:2;
  text-align:center;
  color:#333;
}
</style>